<template>
  <router-view></router-view>
  <!-- <div class="Pointer" @click="ShowSettingBox()" id="SettingColor">
    <el-icon><tools /></el-icon>
  </div>
  <div @click="CloseSettingBox()" :class="SettingBack" id="SettingBack">
    <div @click.stop id="Setting">
      <div id="Title">Set Theme Color</div>
      <div id="SettingOption">
        <div
          v-for="(item, index) in ColorList"
          @click="ToColor(item)"
          :class="item.active"
          :style="item.background"
          :key="index"
          id="OptionColor"
        >
          <el-icon><circle-check-filled /></el-icon>
        </div>
      </div>
      <div @click="CloseSettingBox()" class="Pointer" id="SettingClose">
        <el-icon><close-bold /></el-icon>
      </div>
    </div>
  </div> -->
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { AppData, ColorItem } from '@/PageData/index';
export default defineComponent({
  setup() {
    const data = reactive<AppData>({
      color: '',
      SettingBack: '',
      // 如果需要添加主题色 清在这里 添加 一个项更改 color 值和 backgroundColor 值即可
      ColorList: [
        {
          active: 'Pointer active',
          background: { backgroundColor: '#806ae6' },
          color: '#806ae6',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#047276' },
          color: '#047276',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#6610f2' },
          color: '#6610f2',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#409eff' },
          color: '#409eff',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#dc3545' },
          color: '#dc3545',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#fd7e14' },
          color: '#fd7e14',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#f56c6c' },
          color: '#f56c6c',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#3930D8' },
          color: '#3930D8',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#17a2b8' },
          color: '#17a2b8',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#FF0198' },
          color: '#FF0198',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#ED9DAA' },
          color: '#ED9DAA',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#A00001' },
          color: '#A00001',
        },
        {
          active: 'Pointer',
          background: { backgroundColor: '#222222' },
          color: '#222222',
        },
      ],
    });

    const Methods = {
      CloseSettingBox() {
        data.SettingBack = '';
      },
      ShowSettingBox() {
        data.SettingBack = 'active';
      },
      ToColor(item: ColorItem) {
        data.ColorList?.forEach((d) => {
          d.active = 'Pointer';
        });

        // this.$store.commit('setColor',item.color);

        item.active = 'Pointer active';
        document.documentElement.style.setProperty('--ZTS', item.color ? item.color : '');

        let ColorJson: any = this.fromHex(item.color);
        data.color = item.color;
        let color = `rgba(${ColorJson.r},${ColorJson.g},${ColorJson.b},${0.06})`;
        let LiuJinZhiColor = this.hexify(color);

        document.documentElement.style.setProperty('--BKC', LiuJinZhiColor);

        let FonTcolor = `rgba(${ColorJson.r},${ColorJson.g},${ColorJson.b},${0.6})`;

        let BoxSha = `rgba(${ColorJson.r},${ColorJson.g},${ColorJson.b},${0.2})`;
        document.documentElement.style.setProperty('--BoxSha', BoxSha);

        document.documentElement.style.setProperty('--FTC', FonTcolor);
      },
      fromHex(color: any) {
        var t: any = {},
          bits = color.length == 4 ? 4 : 8, //如果是shorthand， #fff, 那么bits为4位, 每一位代表的个属性, 其它的为8位 每两位代表一个属性 #ffffff00
          mask = (1 << bits) - 1; //表示字节占位符， 向左移4位或8位，var a = (1 << 4 ) - 1 -> 10000 - 1,  a.toString(2); // 1111，或者 8位的 1111 1111
        color = Number('0x' + color.substr(1)); //#ff0000 转变为16进制0xff0000;
        if (isNaN(color)) {
          return null; // Color
        }
        ['b', 'g', 'r'].forEach(function (x) {
          var c = color & mask;
          color >>= bits;
          t[x] = bits == 4 ? 17 * c : c; // 0xfff ， 一个f应该代表 255, 应该当[0-255]，按15等份划分，每一等份间隔 17。 所以获得的值需要乘以17, 才能表示rgb中255的值
        });
        t.a = 1;
        return t; // Color
      },
      hexify(color: any) {
        var values = color
          .replace(/rgba?\(/, '')
          .replace(/\)/, '')
          .replace(/[\s+]/g, '')
          .split(',');
        var a = parseFloat(values[3] || 1),
          r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
          g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
          b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
        return '#' + ('0' + r.toString(16)).slice(-2) + ('0' + g.toString(16)).slice(-2) + ('0' + b.toString(16)).slice(-2);
      },
    };
    onMounted(() => {
      data.ColorList;
      data.ColorList?.forEach((d, index) => {
        // 更改 index 的值 可以更改默认主题色
        if (index == 3) {
          Methods.ToColor(d);
          // 数字从 0 开始 和下面的 #Color 里的颜色 相对应
        }
      });
    });
    return {
      ...toRefs(data),
      ...Methods,
    };
  },
});
</script>

<style>
#Color {
  color: #806ae6;
  color: #047276;
  color: #6610f2;
  color: #409eff;
  color: #dc3545;
  color: #fd7e14;
  color: #f56c6c;
  color: #3930d8;
  color: #17a2b8;
  color: #ff0198;
  color: #ed9daa;
  color: #a00001;
  color: #222222;
}

:root {
  --ZTS: #fff;
  --BKC: #fff;
  --FTC: #fff;
  --BoxSha: #fff;
}

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  cursor: url('@/assets/x1.cur'), auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;

  /* font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif; */

  /* font: 12px/1.5 Tahoma, Helvetica, Arial, "宋体", sans-serif; */

  /* font: 14px/1.5 "Microsoft YaHei", arial, tahoma, \5b8b\4f53, sans-serif; */

  /* font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; */

  /* font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑",
    Arial, sans-serif; */

  /* font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; */
  transition: background-color 0.3s, color 0.05s;
}

.Pointer {
  cursor: url('@/assets/x2.cur'), auto;
}

#SettingColor {
  width: 60px;
  height: 60px;
  position: fixed;
  background: var(--ZTS);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  z-index: 999;
}

#SettingColor i {
  animation: Zhuan linear infinite 1s;
}

@keyframes Zhuan {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(180deg);
  }
}

#SettingBack {
  position: fixed;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  border-radius: 5px;
  box-shadow: 0px 0px 50px 5px var(--ZTS);
  z-index: -1;
  transition: 0.3s;
}

#SettingBack.active {
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
}

#SettingBack.active #Setting {
  right: 100px;
  opacity: 1;
}

#Setting {
  transition: 0.4s;
  width: 560px;
  position: absolute;
  top: 100px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.164);
  padding: 20px;
  right: -560px;
  opacity: 0;
}

#Setting #Title {
  width: 100%;
  height: 30px;
  font-size: 20px;
  line-height: 30px;
}

#Setting #SettingOption {
  width: 100%;
  height: 200px;
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#OptionColor {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 10px;
  transition: 0.3s;
}

#OptionColor i {
  opacity: 0;
  transform: scale(0.9);
  transition: 0.2s;
}

#Setting #SettingClose {
  width: 50px;
  height: 50px;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: absolute;
  right: -20px;
  top: -20px;
  transition: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #838098;
}

#Setting #SettingClose:hover {
  transform: rotateZ(180deg);
}

#OptionColor:active {
  transform: scale(0.9);
}

#OptionColor.active i {
  opacity: 1;
  transform: scale(1);
}

.Main {
  width: 100%;
  box-shadow: 0px 0px 10px var(--BoxSha);
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  padding: 20px;
}
</style>

<style>
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: var(--ZTS);

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--ZTS), 0 0 5px var(--ZTS);
  opacity: 1;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: var(--ZTS);
  border-left-color: var(--ZTS);
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.el-button:not(.is-text) {
  background-color: red;
}

.el-button--primary {
  background: red;
}
.ymdiv {
  height: 600px;
  border-radius: 10px;
  margin: 1px;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px 1px 5px #cfcfcf;
}
</style>
